<!--
 * @Author: Nico
-->
<template>
  <UiPdaFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <van-field
      :ref="info._id"
      v-model.trim="formDataModel"
      v-ui-ref="vSetRef"
      class="border-b-2 rounded-none uiPdaTimePicker"
      :class="{ hasPrefix: info.extension.prefixIcon && info.extension.prefixIcon.value }"
      :disabled="info.extension.disabled.value || conditionProperty.disabled"
      :label="info.extension.label.value"
      left-icon="info.extension.suffixIcon.value ? 'search' : 'none'"
      :name="info.extension.model.value"
      :placeholder="translateTitle('Ve.elements.请选择')"
      readonly
      :required="info.extension.extendRule.value.required && info.extension.extendRule.value.ChangeSwitch"
      :right-icon="info.extension?.isClear?.value ? 'close' : 'none'"
      type="text"
      @click="clickItem"
      @click-right-icon.stop="clickRightIcon()"
    />
    <van-popup position="bottom" :show="showPicker">
      <!-- :title="translateTitle(`Ve.elements.请选择时间`)" -->
      <van-datetime-picker
        v-model="modelValue"
        :max-date="maxDate"
        :min-date="minDate"
        :title="'请选择' + info.extension.label.value"
        :type="info.extension.moduleType.value"
        @cancel="showPicker = false"
        @confirm="pickConfirm($event)"
      />
    </van-popup>
  </UiPdaFormItem>
</template>
<script>
  import isEmpty from 'lodash/isEmpty'
  import { translateTitle } from '@/utils/i18n'
  import dayjs from 'dayjs'
  import { defineComponent } from 'vue'
  import { Field, Popup, DatetimePicker } from 'vant'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiPdaTimePicker',
    components: {
      [Field.name]: Field,
      [Popup.name]: Popup,
      [DatetimePicker.name]: DatetimePicker,
    },
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin],
    data() {
      return {
        showPicker: false,
        modelValue: '', //日历组件下拉
        minDate: new Date(1990, 0, 0),
        maxDate: new Date(2050, 0, 0),
        conditionProperty: {
          disabled: false,
          hidden: false,
        },
      }
    },
    computed: {
      // 日期时间类型
      moduleType() {
        return this.info.extension.moduleType.value
      },
      //是否默认当前时间
      isDay() {
        return this.info.extension.isDay.value
      },
      // 扩展默认框
      defaultValue() {
        return this.info.extension.defaultValue.value
      },
    },
    watch: {
      // 日期时间类型
      moduleType: {
        handler() {
          this.dealVal()
        },
      },
      isDay: {
        handler() {
          this.dealVal()
        },
      },
      defaultValue: {
        handler(newVal) {
          this.formDataModel = newVal
        },
      },
    },
    created() {
      this.dealVal()
      // 设置下拉选选中值
      if (this.formDataModel) {
        this.modelValue = new Date(this.formDataModel)
      } else {
        this.modelValue = new Date()
      }
    },
    methods: {
      translateTitle,
      clickRightIcon() {
        this.formDataModel = ''
      },
      // 处理变化值
      dealVal() {
        // 默认当前时间
        if (this.isDay) {
          // 默认值放置表单
          this.formDataModel = this.valType()
          //默认值放置扩展默认值
          this.info.extension.defaultValue.value = this.valType()
        } else {
          this.info.extension.defaultValue.value = ''
        }
        // 设置下拉选选中值
        if (this.formDataModel) {
          this.modelValue = new Date(this.formDataModel)
        } else {
          this.modelValue = new Date()
        }
      },
      valType(time) {
        let timer = time ? time : new Date()
        if (this.moduleType === 'date') {
          return dayjs(timer).format('YYYY-MM-DD')
        } else if (this.moduleType === 'datetime') {
          return dayjs(timer).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      //确定按钮
      pickConfirm(event) {
        if (isEmpty(event)) {
          this.showPicker = false
        }
        this.formDataModel = this.valType(event)
        this.runEventTask('checked')
        this.cursorHover()
      },
      // 点击输入框
      clickItem() {
        if (!this.hasPreview) {
          return
        }
        if (this.info.extension.disabled.value || this.conditionProperty.disabled) {
          console.log('不许弹出来！你被禁用了！！！哈哈哈')
        } else {
          console.log('this.modelValue', this.modelValue)
          this.showPicker = true
        }
      },
      $closeModel() {
        this.showPicker = true
      },
    },
  })
</script>
<style lang="scss" scoped>
  .uiPdaTimePicker {
    :deep() .hasPrefix .el-input__inner {
      padding-left: 25px;
    }
    .van-cell {
      padding: 0rem !important;
      display: flex !important;
      flex-wrap: wrap !important;
    }
    :deep() .van-field__value {
      overflow: visible;
      width: 100%;
      flex: none !important;
    }
    :deep() .van-field__control {
      text-indent: 10px !important;
      font-size: 0.8rem !important;
    }
    :deep() .van-icon-search {
      color: rgb(42, 119, 182);
      font-size: 1rem !important;
    }
    :deep() .van-field__label--center {
      font-size: 0.8rem !important;
      padding: 0.5rem 0rem;
    }
    :deep() .van-cell__title {
      font-size: 0.8rem !important;
    }
    :deep() .van-field__left-icon {
      margin: 0rem !important;
      width: 0.8rem !important;
    }
    :deep() .van-field__label {
      width: 70%;
    }
  }
</style>
